<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>4.几个注意点</title>
		<!-- 引入开发版本的Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				几个注意点：
						1.关于组件名:
										一个单词组成：
													第一种写法(首字母小写)：school
													第二种写法(首字母大写)：School
										多个单词组成：
													第一种写法(kebab-case命名)：my-school
													第二种写法(CamelCase命名)：MySchool
										备注：
												(1).组件名必须要回避HTML中已有的元素名称，
														例如：
															(1).h2会报错
															(2).H2不会报错，但不推荐，脚手架中可能会有警告。
												(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

						2.关于组件标签:
										第一种写法：<组件名></组件名> 
										第二种写法：<组件名/>	
		 -->
		<!-- 准备好一个容器-->
		<div id="root"></div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		//定义一个Car组件
		const car = Vue.extend({
			template:`
				<div>
					<h2>汽车品牌：{{brand}}</h2>	
					<h2>汽车价格：{{price}}</h2>
					<button @click="showCar">提示汽车信息</button>	
				</div>
			`,
			data(){
				return {
					brand:'兰博基尼',
					price:'100万'
				}
			},
			methods:{
				showCar(){
					alert(`${this.brand}--${this.price}`)
				}
			}
		})
		
		//定义一个Student组件
		const Student = Vue.extend({
			name:'Xuesheng', //此处的name配置只能影响：开发者工具中呈现的名字！！！！
			template:`
				<div>
					<h2>学生姓名：{{name}}</h2>	
					<h2>学生年龄：{{age}}</h2>
					<button @click="showStudent">提示学生信息</button>	
				</div>
			`,
			data(){
				return {
					name:'张梅梅',
					age:30
				}
			},
			methods:{
				showStudent(){
					alert(`${this.name}--${this.age}`)
				}
			}
		})

		//定义一个App组件
		const App = Vue.extend({
			template:`
				<div>
					<h1>你好，我是App组件</h1>
					<!-- <car></car> -->
					<!-- <atguigu-car></atguigu-car> -->
					<!-- <Student></Student> -->
					<car/>
					<car/>
					<car/>
				</div>
			`,
			components:{
				car,
				Student,
				'atguigu-car':car,
				AtguiguStudent:Student,
			}
		})

		//创建vm
		new Vue({
			el:'#root',
			template:'<App></App>',
			components:{App}
		})

	</script>
</html>